<template>
  <lay-card>
    <lay-form :model="userPwd" :rules="rulesModify" required>
      <lay-form-item label="用户工号" prop="user_no">
        <lay-input v-model="userPwd.user_no" readonly=""></lay-input>
      </lay-form-item>
      <lay-form-item label="旧的密码" prop="old_password">
        <lay-input v-model="userPwd.old_password" type="password"></lay-input>
      </lay-form-item>
      <lay-form-item label="新的密码" prop="new_password">
        <lay-input v-model="userPwd.new_password1" type="password"></lay-input>
      </lay-form-item>
      <lay-form-item label="确认密码" prop="new_password">
        <lay-input v-model="userPwd.new_password2" type="password"></lay-input>
      </lay-form-item>
      <lay-form-item style="text-align: center;">
        <lay-button type="primary" @click="submitPwd">修改密码</lay-button>
      </lay-form-item>
    </lay-form>
    <lay-line id="error_message">{{error_message}}</lay-line>
  </lay-card>
</template>

<script lang="ts">
export default {
    name: "modifyPassWord"
}
</script>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {layer} from "@layui/layer-vue";
import {password_modify} from "../../api/module/user";
import {passwordEncryption} from "../../store/user";

const error_message = ref("");
const rulesModify = ref({
  user_no : {
    type :  'number'
  },
  old_password : {
    type :  'string',
    min : 6,
    max : 20
  },
  new_password : {
    type :  'string',
    min : 6,
    max : 20
  }
});

const {user_no} = defineProps({
  user_no: {type: String, default: ""},
})

const userPwd = reactive({user_no: '', old_password: '', new_password1: '', new_password2: ''})

onMounted(()=>{
    userPwd.user_no = user_no;
})

const submitPwd = async () => {
    const userPwd_new = reactive({user_no: user_no,
        old_password: passwordEncryption(userPwd.old_password),
        new_password1: passwordEncryption(userPwd.new_password1),
        new_password2: passwordEncryption(userPwd.new_password2)
    })
    let {result, status, message} = await password_modify(userPwd_new);
    error_message.value = message;
}
</script>

<style scoped>

</style>